<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>工具集</title>
	<link href="../../css/bootstrap.min.css" rel="stylesheet">
	<link rel="stylesheet" href="../../plugin/css/button.css">
	<!-- <link rel="stylesheet" href="../../plugin/layui/layui/css/layui.css"> -->
</head>
<body>
<div class="container">
	<h1>正在建设中，敬请期待！</h1>
	<hr/>
	<!-- bootstrap 基本面板结构 -->
<!-- <div class="panel panel-success">
    <div class="panel-heading">
        <h3 class="panel-title">
            带有 title 的面板标题
        </h3>
    </div>
    <div class="panel-body">
        面板内容
    </div>
    <div class="panel-footer">面板脚注</div>
</div> -->
<div class="panel panel-success">
    <div class="panel-heading">
        <h3 class="panel-title">
            手机号归属地查询
        </h3>
    </div>
    <div class="panel-body">
        <div class="input-group has-success">
    		<!-- <label class="col-sm-2 control-label" for="inputSuccess">输入成功</label> -->
    		<span class="input-group-addon">电话：</span>
      		<input type="text" class="form-control" id="tel" placeholder="键入正确的电话号">
  		</div><br/>
<!--   		<div class="form-group has-success">
  			<textarea class="form-control" id="msg_contain" placeholder="键入短信内容"></textarea>
  			<p>* </p>
  		</div> -->
  		<p>* 【聚合数据】 API：https://www.juhe.cn/docs/api/id/11</p>
  		<span id="tel_res"></span>
    </div>
    <div class="panel-footer">
    	<button class="button button-3d button-action button-pill" id="tel_location">查询归属地</button>
    </div>
</div>

<div class="panel panel-warning">
    <div class="panel-heading">
        <h3 class="panel-title">
            彩票开奖查询
        </h3>
    </div>
    <div class="panel-body">
        <div class="input-group has-warning">
    		<!-- <label class="col-sm-2 control-label" for="inputSuccess">输入成功</label> -->
    		<span class="input-group-addon">彩票号：</span>
      		<input type="text" class="form-control" id="lott_no" placeholder="键入彩票号">
  		</div><br/>
<!--   		<div class="form-group has-success">
  			<textarea class="form-control" id="msg_contain" placeholder="键入短信内容"></textarea>
  			<p>* </p>
  		</div> -->
  		<p>* 【聚合数据】 API：https://www.juhe.cn/docs/api/id/3001</p>
  		<span id="lott_res"></span>
    </div>
    <div class="panel-footer">
    	<button class="button button-3d button-highlight button-pill" id="sel_lott">查询彩票</button>
    </div>
</div>

<!-- <div class="panel panel-info">
    <div class="panel-heading">
        <h3 class="panel-title">
            在线生成二维码
        </h3>
    </div>
    <div class="panel-body">
        <div class="input-group has-info">
    		<span class="input-group-addon">文本：</span>
      		<input type="text" class="form-control" id="img_text" placeholder="键入以生成二维码">
  		</div><br/>
  		<div id="bg_color"></div>
  		<p>* 【聚合数据】 API：https://www.juhe.cn/docs/api/id/296</p>
  		<div id="img_cont"></div>
    </div>
    <div class="panel-footer">
    	<button class="button button-3d button-primary button-pill" id="gene_img">生成二维码</button>
    </div>
</div> -->
<div class="panel panel-info">
    <div class="panel-heading">
        <h3 class="panel-title">
            新华字典
        </h3>
    </div>
    <div class="panel-body">
        <div class="input-group has-info">
        <!-- <label class="col-sm-2 control-label" for="inputSuccess">输入成功</label> -->
        <span class="input-group-addon">查询汉字：</span>
          <input type="text" class="form-control" id="img_text" placeholder="键入单个汉字">
      </div><br/>
      <div id="bg_color"></div>
      <p>* 【聚合数据】 API：</p>
      <div id="img_cont"></div>
    </div>
    <div class="panel-footer">
      <button class="button button-3d button-primary button-pill" id="gene_img">查询</button>
    </div>
</div>






</div>
<script src="../../js/jquery.min.js"></script>
<script src="../../js/bootstrap.min.js"></script>
<!-- <script src="../../plugin/layui/layui/layui.js"></script> -->
<script src="../../plugin/layui/layer/layer.js"></script>
<script>
//001.手机归属地查询
$("#tel_location").click(function(){
	var tel = $("#tel").val();
	if(tel != ""){
		var data = {
			key: '5b09d474bcab31846a39cd627c850fd6',
			phone: tel
		};
		function tel_res(data){
			$("#tel_res").html("省份：" + data.result.province + "\n城市：" + data.result.city + "\n区号代码：" + data.result.areacode + "\n邮编：" + data.result.zip + "\n运营商：" + data.result.company);
		}
		cross_domain("get","http://apis.juhe.cn/mobile/get",data,tel_res);	//跨域请求
	}else{
		layer.msg("请输入需要查询的电话~");
	}
});

//002.彩票开奖查询
$("#sel_lott").click(function(){
	var lott_no = $("#lott_no").val();
	if(lott_no != ""){
		var data = {
			key: '50262d5823ea35af6d2b6491dc9df7d3',
            lottery_id: lott_no
		};
		function lott_res(data){
			$("#lott_res").html(data);
		}
		cross_domain("get","http://apis.juhe.cn/lottery/query",data,lott_res);
	}else{
		layer.msg("请输入需要查询的彩票ID~");
	}
});

//003.新华字典
var data_jijie;
var data_xiangjie;
$("#gene_img").click(function(){
	var img_text = $("#img_text").val();
	if(img_text != ""){
		var data = {
			key: '98adb71fd7c38e38455f8522521d4cbe',
            word: img_text
		};
		function img_cont(data){
      $("#img_cont").html("字:" + data.result.zi + "\n笔画:" + data.result.bihua + "\n拼音:" + data.result.pinyin + "\n部首:"+data.result.bushou+"\n五笔:" +data.result.wubi);
      $("#img_cont").append("&nbsp;<button onclick='show_diction()' class='btn btn-info'>查看详解</button>");
      data_jijie = data.result.jijie;
      data_xiangjie = data.result.xiangjie;
			console.log(data.result);
		}
		cross_domain("get","http://v.juhe.cn/xhzd/query",data,img_cont);
	}else{
		layer.msg("请输入需要查询的文字~");
	}
});
  function show_diction(){
    var text_xj = "";
    var text_xj2 = "";
    $.each(data_jijie,function(index, obj){
      text_xj += obj + ' \n ';
    });
    $.each(data_xiangjie,function(index, obj){
      text_xj2 += obj + ' \n ';
    });
    alert(text_xj);
    alert(text_xj2);
  };







/**		
* author 绿绿峰
* jq AJAX跨域请求 方式：jsonP
* 参数-------------------------
* mode  请求方式【get,post】
* url 请求路径 
* request_data 请求数据【{key: value,……}】
* res_fun_name 自定义的回调方法名，它的参数是结果集
* 返回值-----------------------
* 触发方法
*/
function cross_domain(mode,url,request_data,res_fun_name){
	jQuery.ajax({
   	    url: url,
   	    type: mode,
   	    dataType: 'jsonp',
   	    data: request_data,
   	    success: function (data) {
   	    	console.log(data);
   	    	res_fun_name(data);	//自定义的返回结果集函数
   	    },
   	    error: function (data,data2,data3){
   	        console.log("ERROR:"+JSON.stringify(data));
   	        console.log("ERROR2:"+JSON.stringify(data2));
   	        console.log("ERROR3:"+JSON.stringify(data3));
   	        res_fun_name(data);
   	    }
   	});
}
//错误 {"reason":"success","result":{"base64_image":"iC"},"error_code":0}
//错误  {"reason":"successed","result":{"id":"1657"},"error_code":0}
//正确 {resultcode: "200", reason: "Return Successd!", result: {province: "辽宁", city: "营口", areacode: "0417"}, error_code: 0}
</script>
</body>
</html>